<div>
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
      <div>
        <a class="navbar-brand">{{_('Settings')}}</a>
      </div>
      <div class="navbar-right">
          <button ng-click="layout.settings=false" type="button" class="btn btn-primary navbar-btn">{{_('OK')}}</button>
      </div>
    </div>
  </nav>
<div class="settings nicescroll">
  <div class="version">{{version}}</div>
  <div ng-form="settingsform" class="form-horizontal" on-enter="saveSettings(user)" on-escape="cancelSettings()"
    <fieldset>

      <settings-account ng-controller="UsersettingsController as usersettings">
        <legend>{{_('Profile')}}</legend>
        <div class="form-group profile-yourname">
          <label class="col-xs-4 control-label">{{_('Your name')}}</label>
          <div class="col-xs-8">
            <input type="text" class="form-control" ng-model="user.displayName" placeholder="{{_('Name')}}" />
          </div>
        </div>
        <div class="form-group profile-yourpicture">
          <label class="col-xs-4 control-label">{{_('Your picture')}}</label>
            <div class="col-xs-8">
                <buddy-picture-capture ng-model="user.buddyPicture"></buddy-picture-capture>
            </div>
        </div>
        <div class="form-group profile-statusmessage">
          <label class="col-xs-4 control-label">{{_('Status message')}}</label>
          <div class="col-xs-8">
            <input type="text" class="form-control" ng-model="user.message" placeholder="{{_('What\'s on your mind?')}}" />
          </div>
        </div>
        <div class="form-group profile-publicnotice">
          <label class="col-xs-4 control-label"></label>
          <div class="col-xs-8">
            <p class="help-block">{{_('Your picture, name and status message identify yourself in calls, chats and rooms.')}}</p>
          </div>
        </div>
        <div ng-if="(withUsers && withUsersRegistration) || userid">
          <div class="form-group profile-yourid">
            <label class="col-xs-4 control-label">{{_('Your ID')}}</label>
            <div ng-switch="withUsersMode">
              <div ng-switch-when="certificate" class="col-xs-8">
                <div ng-if="userid">
                  <p class="form-control-static well well-sm">{{userid|displayUserid}}</p>
                  <p class-"help-block">{{_('Authenticated by certificate. To log out you have to remove your certificate from the browser.')}}</p>
                </div>
              </div>
              <div ng-switch-default class="col-xs-8">
                <div ng-if="!userid && withUsersRegistration">
                  <label ng-if="usersettings.loginUserid">
                    <button class="btn btn-small btn-primary btn-sign-in" ng-click="usersettings.loginUserid()">{{_('Sign in')}}</button>
                  </label>
                  <label ng-if="usersettings.registerUserid">
                    <button class="btn btn-small btn-info btn-create-account" ng-click="usersettings.registerUserid($event)">{{_('Create an account')}}</button>
                  </label>
                </div>
                <p class="form-control-static well well-sm" ng-if="userid">{{userid|displayUserid}}</p>
                <label ng-if="userid && withUsersForget && usersettings.forgetUserid">
                  <button class="btn btn-small btn-default btn-sign-out" ng-click="usersettings.forgetUserid()">{{_('Sign out')}}</button>
                </label>
                <label ng-if="userid && usersettings.accountUserid">
                  <button class="btn btn-small btn-info btn-manage-account" ng-click="usersettings.accountUserid()">{{_('Manage account')}}</button>
                </label>
              </div>
            </div>
          </div>
        </div>
      </settings-account>
      <settings-media ng-show="mediaSources.supported || supported.constraints.audioVideo">
        <legend>{{_('Media')}}</legend>
        <div ng-show="mediaSources.supported">
          <div class="form-group">
            <label class="col-xs-4 control-label">{{_('Microphone')}}</label>
            <div class="col-xs-8">
              <select class="form-control" ng-model="user.settings.microphoneId" ng-options="mic.id as mic.label for mic in mediaSources.audio"></select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-4 control-label">{{_('Camera')}}</label>
            <div class="col-xs-8">
              <select class="form-control" ng-model="user.settings.cameraId" ng-options="vid.id as vid.label for vid in mediaSources.video"></select>
            </div>
          </div>
        </div>
        <div ng-show="supported.constraints.audioVideo" class="form-group">
          <label class="col-xs-4 control-label">{{_('Video quality')}}</label>
          <div class="col-xs-8">
            <div class="btn-group">
              <button type="button" class="btn btn-default" ng-model="user.settings.videoQuality" btn-radio="'low'">{{_('Low')}}</button>
              <button type="button" class="btn btn-default" ng-model="user.settings.videoQuality" btn-radio="'high'">{{_('High')}}</button>
              <button ng-if="supported.constraints.hdVideo" type="button" class="btn btn-default" ng-model="user.settings.videoQuality" btn-radio="'hd'">{{_('HD')}}</button>
              <button ng-if="supported.constraints.hdVideo" type="button" class="btn btn-default" ng-model="user.settings.videoQuality" btn-radio="'fullhd'">{{_('Full HD')}}</button>
            </div>
          </div>
        </div>
      </settings-media>
      <settings-settings>
        <legend>{{_('General')}}</legend>
        <div class="form-group">
          <label class="col-xs-4 control-label">{{_('Language')}}</label>
          <div class="col-xs-8">
            <select class="form-control" ng-model="user.settings.language" ng-options="l.code as l.name for l in availableLanguages | orderBy:'code'"></select>
            <span class="help-block">{{_('Language changes become active on reload.')}}</span>
          </div>
        </div>
        <div class="form-group">
          <label class="col-xs-4 control-label">{{_('Default room')}}</label>
          <div class="col-xs-8">
            <input type="text" class="form-control" ng-model="user.settings.defaultRoom" placeholder="{{_('Main')}}" />
            <span class="help-block">{{_('Set alternative room to join at start.')}}</span>
          </div>
        </div>
        <legend>{{_('Notifications')}}</legend>
        <div class="form-group" ng-show="desktopNotify.supported">
          <label class="col-xs-4 control-label">{{_('Desktop notification')}}</label>
          <div class="col-xs-8">
            <span ng-switch="desktopNotify.level">
              <a ng-switch-when="default" class="btn btn-small btn-success" ng-click="requestDesktopNotifyPermission()">{{_('Enable')}}</a>
              <p class="form-control-static text-error" ng-switch-when="denied"><i class="fa fa-exclamation-triangle"></i>{{_('Denied - check your browser settings')}}</p>
              <p class="form-control-static text-success" ng-switch-when="granted"><i class="fa fa-ok"></i>{{_('Allowed')}}</p>
            </span>
          </div>
        </div>
        <div class="form-group">
          <label class="col-xs-4 control-label"><input type="checkbox" ng-model="user.settings.sound.incomingMessages"/></label>
          <div class="col-xs-8">
            <div class="form-control-static">{{_('Sounds for incoming messages')}}</div>
          </div>
        </div>
        <div class="form-group">
          <label class="col-xs-4 control-label"><input type="checkbox" ng-model="user.settings.sound.incomingCall"/></label>
          <div class="col-xs-8">
            <div class="form-control-static">{{_('Ring on incoming calls')}}</div>
          </div>
        </div>
        <div class="form-group">
          <label class="col-xs-4 control-label"><input type="checkbox" ng-model="user.settings.sound.roomJoinLeave"/></label>
          <div class="col-xs-8">
            <div class="form-control-static">{{_('Sounds for users in current room')}}</div>
          </div>
        </div>
      </settings-settings>

      <settings-extra settings-extra></settings-extra>

      <settings-advanced class="collapse" collapse="showAdvancedSettings">

        <legend>{{_('Advanced settings')}}</legend>

        <div>

          <div class="form-group" ng-show="supported.constraints.renderToAssociatedSink">
            <label class="col-xs-4 control-label">{{_('Play audio on same device as selected microphone')}}</label>
            <div class="col-xs-8">
              <div class="checkbox">
               <label>
                  <input type="checkbox" ng-model="user.settings.audioRenderToAssociatedSkin"/>&nbsp;
               </label>
              </div>
            </div>
          </div>

          <div ng-show="user.settings.experimental.enabled">

            <div class="form-group" ng-show="supported.constraints.chrome">
              <label class="col-xs-4 control-label">{{_('Experimental AEC')}}</label>
              <div class="col-xs-8">
                <div class="checkbox">
                 <label>
                    <input type="checkbox" ng-model="user.settings.experimental.audioEchoCancellation2"/>&nbsp;
                 </label>
                </div>
              </div>
            </div>

            <div class="form-group" ng-show="supported.constraints.chrome">
              <label class="col-xs-4 control-label">{{_('Experimental AGC')}}</label>
              <div class="col-xs-8">
                <div class="checkbox">
                 <label>
                    <input type="checkbox" ng-model="user.settings.experimental.audioAutoGainControl2"/>&nbsp;
                 </label>
                </div>
              </div>
            </div>

            <div class="form-group" ng-show="supported.constraints.chrome">
              <label class="col-xs-4 control-label">{{_('Experimental noise suppression')}}</label>
              <div class="col-xs-8">
                <div class="checkbox">
                 <label>
                    <input type="checkbox" ng-model="user.settings.experimental.audioNoiseSuppression2"/>&nbsp;
                 </label>
                </div>
              </div>
            </div>

          </div>

          <div class="form-group" ng-show="supported.constraints.audioVideo">
            <label class="col-xs-4 control-label">{{_('Max video frame rate')}}</label>
            <div class="col-xs-8">
              <div class="btn-group">
                <button type="button" class="btn btn-default" ng-model="user.settings.maxFrameRate" btn-radio="8">8</button>
                <button type="button" class="btn btn-default" ng-model="user.settings.maxFrameRate" btn-radio="12">12</button>
                <button type="button" class="btn btn-default" ng-model="user.settings.maxFrameRate" btn-radio="20">20</button>
                <button type="button" class="btn btn-default" ng-model="user.settings.maxFrameRate" btn-radio="30">30</button>
                <button type="button" class="btn btn-default" ng-model="user.settings.maxFrameRate" btn-radio="'auto'">{{_('auto')}}</button>
              </div>
            </div>
          </div>

          <div class="form-group" ng-show="supported.constraints.chrome">
            <label class="col-xs-4 control-label">{{_('Send stereo audio')}}</label>
            <div class="col-xs-8">
              <div class="checkbox">
               <label>
                  <input type="checkbox" ng-model="user.settings.sendStereo"/>&nbsp;
               </label>
              </div>
              <span class="help-block">{{_('Sending stereo audio disables echo cancellation. Enable only if you have stereo input.')}}</span>
            </div>
          </div>

          <div class="form-group" ng-show="supported.constraints.chrome">
            <label class="col-xs-4 control-label">{{_('Detect CPU over use')}}</label>
            <div class="col-xs-8">
              <div class="checkbox">
               <label>
                  <input type="checkbox" ng-model="user.settings.videoCpuOveruseDetection"/>&nbsp;
               </label>
               <span class="help-block">{{_('Automatically reduces video quality as needed.')}}</span>
              </div>
            </div>
          </div>

          <div ng-show="user.settings.experimental.enabled">

            <div class="form-group" ng-show="supported.constraints.chrome">
              <label class="col-xs-4 control-label">{{_('Optimize for high resolution video')}}</label>
              <div class="col-xs-8">
                <div class="checkbox">
                 <label>
                    <input type="checkbox" ng-model="user.settings.experimental.videoLeakyBucket"/>&nbsp;
                 </label>
                </div>
              </div>
            </div>

            <div class="form-group" ng-show="supported.constraints.chrome">
              <label class="col-xs-4 control-label">{{_('Reduce video noise')}}</label>
              <div class="col-xs-8">
                <div class="checkbox">
                 <label>
                    <input type="checkbox" ng-model="user.settings.experimental.videoNoiseReduction"/>&nbsp;
                 </label>
                </div>
              </div>
            </div>

            <div class="form-group" ng-show="supported.constraints.vp9">
              <label class="col-xs-4 control-label">{{_('Prefer VP9 video codec')}}</label>
              <div class="col-xs-8">
                <div class="checkbox">
                 <label>
                    <input type="checkbox" ng-model="user.settings.experimental.preferVideoSendCodecVP9"/>&nbsp;
                 </label>
                </div>
              </div>
            </div>

          </div>

          <div class="form-group" ng-show="supported.constraints.chrome">
            <label class="col-xs-4 control-label">{{_('Enable experiments')}}</label>
            <div class="col-xs-8">
              <div class="checkbox">
               <label>
                  <input type="checkbox" ng-model="user.settings.experimental.enabled"/>&nbsp;
               </label>
              </div>
            </div>
          </div>

        </div>

        <settings-advanced-extra settings-advanced-extra></settings-advanced-extra>

      </settings-advanced>

      <hr/>

      <div class="form-group">
        <div class="col-xs-4 control-label"></div>
        <div class="col-xs-8">
          <a ng-click="showAdvancedSettings = !showAdvancedSettings"><span ng-show="showAdvancedSettings">{{_('Show advanced settings')}}</span><span ng-hide="showAdvancedSettings">{{_('Hide advanced settings')}}</span></a>
        </div>
      </div>

      <hr/>

      <div class="form-group">
        <div class="col-xs-8 col-xs-offset-4">
          <div class="checkbox">
            <label>
               <input type="checkbox" ng-model="rememberSettings"> {{_('Remember settings')}}
            </label>
            <p class="text-warning" ng-show="userid &&!rememberSettings && loadedUserlogin"><strong>{{_('Your ID will still be kept - press the log out button above to delete the ID.')}}</strong></p>
          </div>
        </div>
      </div>

    </fieldset>
  </div>
</div>
</div>